使用facebook sdk 和google sdk中的社交功能(点赞、分享和第三方登录)——vue

| facebook , google , Social

因为公司的活动页面都是面向海外发行，所以可能要用到第三方登录和facebook点赞分享，首先是要找到官方SDK文档，然后是vue和第三方的交互

facebook 点赞

❶ 使用sdk
引入sdk有两种方式
① 在main.js里面引入sdk

1
2
3
4
5
6
7
8
9
(function (d, s, id) {
var js,
fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v3.3";
fjs.parentNode.insertBefore(js, fjs);
})(document, "script", "facebook-jssdk");

② 在html里面直接引入

1
2
3
4
5
6
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v3.3">
</script>

//template组件
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width=""
data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>

❷ 直接用iframe

1
2
3
4
5
6
7
8
9
10
11
<iframe
  src="https://www.facebook.com/plugins/like.php?
  href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=450&
  layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId"
  width="450" height="80" 
  style="border:none;overflow:hidden" 
  scrolling="no" 
  frameborder="0" 
  allowTransparency="true"
  allow="encrypted-media">
</iframe>

关于样式，不可更改，如果非要更改，这个流程会很麻烦，要申请专用图标

可以更改语言，在js链接里面

facebook登录

登录里面可以获取用户名和一个id,如果要获取其他信息可以申请

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
data() {
        return {
          profile: {},
          authorized: false
        };
      },
      mounted() {
        let vm = this;
        window.fbAsyncInit = function () {
          FB.init({
            appId: "xxx",
            xfbml: true,
            status: true,
            cookie: true,
            autoLogAppEvents: true,
            version: "v3.3"
          });
          //login
          FB.AppEvents.logPageView();
          //Get FB Login Status
          FB.getLoginStatus(response => {
            vm.statusChangeCallback(response);
          });
        };
      },
    methods: {
      getProfile() {
        let vm = this;
        FB.api("/me", function (response) {
          console.log(response, typeof response, "me api info");
          vm.$set(vm, "profile", response);
        });
      },
      statusChangeCallback(response) {
        let vm = this;
        if (response.status === "connected") {
          vm.authorized = true;
          vm.getProfile();
        } else if (response.status === "not_authorized") {
          vm.authorized = false;
        } else if (response.status === "unknown") {
          vm.profile = {};
          vm.authorized = false;
        } else {
          vm.authorized = false;
        }
      },
      Login() {
        let vm = this;
        FB.login(
          function (response) {
            vm.statusChangeCallback(response);
            console.log(response, "login response 登录返回");
          }, {
            scope: "email, public_profile",
            return_scopes: true
          }
        );
      }

    }

facebook分享

1 直接用iframe或者用引入js方式，同以上

2 如果要更改样式在自定义分享按钮的点击事件里面

3 分享有个回调，可以判断是否分享

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
sharefacebook() {
     FB.ui({
         method: "share",
         href: "https://www.facebook.com/%E5%85%89%E4%B9%8B%E7%B5%82%E7%AB%A0-417408922191487/"
       },
       function (response) {
         //error_message仅在用户通过 Facebook 登录来登录您的应用时提供。
         console.log(response, "response");
         if (response && !response.error_message) {
           alert(
             "感谢您完成分享活动结束后将公布幸运得奖名单请持续关注粉专最新消息"
           );
         } else {
           console.log("Error while posting.");
         }
       }
     );
   }

3 自定义分享title和图片，在html head里面加上facebook标志的类似

1
2
3
4
5
6
<meta property="og:url" content="https://www.facebook.com/" />
<!-- url和要分享的url一致 -->
<meta property="og:type" content="website" />
<meta property="og:title" content="xxx" />
<meta property="og:description" content="xxx" />
<meta property="og:image" content="http://xxx.com/img/logo.png" />

facebook API
社交插件

google登录

google API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
//google login
   getGoogleInfo(status) {
     let vm = this
     gapi.load('auth2', function() {
       let auth2 = gapi.auth2.init({
         // client_id:
         //   'xxx.apps.googleusercontent.com',
         client_id:
           'xxx.apps.googleusercontent.com',
         cookiepolicy: 'single_host_origin'
       })
       auth2.signIn().then(function() {
         let accessToken = auth2.currentUser.get().getAuthResponse().id_token
         let accessId = auth2.currentUser
           .get()
           .getBasicProfile()
           .getId()
         if (status == 1) {
           vm.googleSignIn(accessId, accessToken)
         } else {
           vm.unBinding(4, accessId, accessToken)
         }
         auth2.signOut().then(function() {
           console.log('User signed out.')
         })
       })
     })
   },
1
2
3
4
5
6
7
//给ios和安卓传值
 if (getClient().ios && window.webkit) {
        window.webkit.messageHandlers.googleLogin.postMessage({ status: 'OK' })
      }
  if (getClient().android && window.user) {
        window.user.googleClick()
  }